<template>
	<view class="">
		<view :class="my ? 'msgs-classic-my' : 'msgs-classic'" @click="gotoTickes">
			<view style="font-weight: bold; font-size: 32upx; margin-bottom: 20upx;">{{ $t('customerObj.Recording') }}</view>
			<view class="item-pic" v-if="obj.content.info.img">
				<image :src="obj.content.info.img" alt="" class="pic" mode="aspectFill"></image>
			</view>
			<view class="item-text">{{ $t('customerObj.Type') }}：{{ moduleTypeList[obj.content.info.moduleType] }}</view>
			<view class="item-text">{{ $t('customerObj.Object') }}：{{ obj.content.info.name }}</view>
			<view class="item-text" v-if="obj.content.info.reason">
				{{ $t('customerObj.Reason') }}：{{ obj.content.info.reason }}
			</view>
			<view v-if="!my" class="time-msg time-text-file_2">
				{{ weChatTimeFormat(obj.sentTime) }}
			</view>
			<view class="time-msg time-text-file_2" v-else>
				<text style="margin-right: 10upx">{{
					weChatTimeFormat(obj.sentTime)
				}}</text>
				<i class="iconfont icon-yidu read-icon" v-if="readTime && readTime >= obj.sentTime"></i>
				<i class="iconfont icon-yidu icon-yifasong" v-else style="margin-left: 6upx"></i>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		weChatTimeFormat
	} from "@/utils/common";
	export default {
		data() {
			return {
				// 1OTC交易，2场内交易，3红包，4转账，5交友，6招聘，7悬赏，8信息
				moduleTypeList: {
					1: this.$t('customerObj.module1'),
					2: this.$t('customerObj.module2'),
					3: this.$t('customerObj.module3'),
					4: this.$t('customerObj.module4'),
					5: this.$t('customerObj.module5'),
					6: this.$t('customerObj.module6'),
					7: this.$t('customerObj.module7'),
					8: this.$t('customerObj.module8')
				},
				// 各种类型的详情页路径配置
				routerUrl: {
					1: '/trading/Trading',
					2: '/trading/Trading',
					6: '/pagesDiscover/recruitment/RecruitmentDetail?id=',
					7: '/pagesDiscover/reward/RewardDetail?id=',
					8: '/pagesDiscover/information/InfoDetail?id='
				}
			}
		},
		props: {
			obj: {
				type: Object,
				default: () => {}
			},
			my: {
				type: Boolean,
				default: () => true
			},
			readTime: {
				type: Number,
				default: () => 0
			}
		},
		methods: {
			weChatTimeFormat,
			gotoTickes() {
				try {
					const info = this.obj?.content?.info
					if (info) {
						const url = this.routerUrl[info.moduleType]
						if (url) {
							uni.navigateTo({
								url: url + info.selectId
							})
						}
					} else {

					}
					console.log(info)
				} catch (error) {

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item-pic {
		width: 160upx;
		height: 160upx;
		border-radius: 10upx;
		margin-bottom: 20upx;
		background: #f6f6f6;

		.pic {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}

	.read-icon,
	.icon-yifasong {
		font-size: 24rpx;
		font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
		font-weight: 400;
		margin-left: 12rpx;
	}

	.time-msg {
		font-size: 20rpx !important;
		font-weight: 400 !important;
		margin-top: 2rpx;
		display: flex;
		align-items: center;
		font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;

		.right-icon {
			width: 24rpx;
			height: 24rpx;
			margin-left: 4rpx;
		}
	}

	.msgs-classic {
		background: #ffffff;
		border-radius: 0px 20rpx 20rpx 20rpx;
		font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
		box-sizing: border-box;
		padding: 20upx 30upx;
		margin: 0 104upx 0 24upx;
		font-size: 28upx;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.8);
		line-height: 44upx;
		word-wrap: break-word;
		white-space: pre-wrap;
		word-break: break-word;
		width: fit-content;
		overflow: hidden;

		.time-text-file_2 {
			color: rgba(135, 135, 135, 0.6);
			text-align: right;
			line-height: 28rpx;
			padding: 10rpx 0rpx;
			justify-content: flex-end;
		}
	}

	.msgs-classic-my {
		border-radius: 20rpx 0px 20rpx 20rpx;
		background: #61bdb2;
		box-sizing: border-box;
		padding: 20upx 30upx;
		margin: 0 24upx 0 104upx;
		font-size: 28upx;
		font-weight: 400;
		color: #ffffff;
		line-height: 44upx;
		word-break: break-word; // 强制换行
		overflow: hidden;

		.time-msg {
			display: block;
			color: rgba(255, 255, 255, 0.8);

			.right-icon {
				width: 24rpx;
				height: 24rpx;
				margin-left: 4rpx;
			}
		}

		.time-text-file_2 {
			text-align: right;
			line-height: 28rpx;
			padding: 0;
			justify-content: flex-end;
		}
	}
</style>